<template>
  <fieldset class="fathcom">
    <legend>父组件的选择区域</legend>
    <p>你的性别是:
        <input type="radio" value="0" v-model="gender"/><span>女</span>
        <input type="radio" value="1" v-model="gender" /><span>男</span>
    </p>
    <p class="p1">
        你的有点包括：
        <input type="checkbox" value="1" v-model="youdian" /><span>盛世美颜</span>
        <input type="checkbox" value="2" v-model="youdian1" /><span>绝世才华</span>
        <input type="checkbox" value="3" v-model="youdian2" /><span>倾国倾城</span>
        <input type="checkbox" value="4" v-model="youdian3" /><span>才华横溢</span>
        <input type="checkbox" value="5" v-model="youdian4" /><span>高富帅</span>
        <input type="checkbox" value="6" v-model="youdian5" /><span>白富美</span>
    </p>
    <SonThCom :sonmsg='msg'/>
  </fieldset>
</template>

<script setup>
import { reactive,ref } from 'vue';
import SonThCom from './SonThCom.vue';
let msg = reactive({
    gender : '',
    youdian : '',
    youdian1 : '',
    youdian2 : '',
    youdian3 : '',
    youdian4 : '',
    youdian5 : '',
});
let gender = ref('');
let youdian = ref('');
let youdian1 = ref('');
let youdian2= ref('');
let youdian3 = ref('');
let youdian4 = ref('');
let youdian5 = ref('');
</script>

<style scoped>
.fathcom{
    width: 95%;
    margin: 0 auto;
}

</style>